<template>
  <div class="box">
    <div class="toplist_box">
      <div class="guanfan">
        <h3>官方榜</h3>
        <div class="list_box" v-for="(val, index) in datalist" :key="index">
          <div class="left">
            <img :src="val.coverImgUrl" alt="" class="toplist_img" />
          </div>
          <div class="right">
            <ul class="top_box">
              <li
                v-for="(item, index) in val.toplist"
                :key="index"
                :class="(index + 1) % 2 == 0 ? 'li1' : ''"
                @click="musicPlay(item.id)"
              >
               <p :class="index<3 ? 'p1' : ''">{{index+1}}</p>
               <p>{{item.name}}</p>
               <div class="ar">
                 {{item.ar[0].name}}
               </div>
              </li>
            </ul>

            <div class="look">
              <a href="#">查看更多</a>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>

      <topwordlist></topwordlist>

    </div>
  </div>
</template>

<script>
import navbar from '@/components/common/navbar.vue'
import myswiper from '@/components/common/swiper.vue'
import musiclist from '@/components/discovery/musiclist.vue'
import topwordlist from '../common/topwordlist.vue'
export default {
  components: {
    navbar,
    myswiper,
    musiclist,
    topwordlist
  },
  data () {
    return {
      datalist: [],
      datalist1: []
    }
  },
  mounted () {
    // 获取榜单
    this.getTop()
  },

  methods: {
    // 获取歌单数据
    getTop (datalist) {
      this.getapi.getToplist().then((data) => {
        this.datalist = data.list
        const datalist = data.list
        // console.log(datalist)

        // 处理榜单数据,获取前四个榜单id
        const arr = []
        for (const key in datalist) {
          if (key < 4) {
          // 请求歌单详情
            this.getapi.getSongmenu(datalist[key].id, 5)
              .then((res) => {
                // console.log(res.songs)
                // 拿到前4个榜单的前五条歌曲信息放入数组中
                datalist[key].toplist = res.songs
                arr.push(datalist[key])
                this.datalist = arr
              })
          }
        }
      })
    },

    musicPlay (e) {
      this.utils.playSong(e).then((res) => {
        this.$bus.$emit('play', res[0], res[1])
      })
    }
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
}
.toplist_box {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  margin-left: 20px;
}
.list_box {
  width: 100%;
  height: 195px;
  margin-top: 10px;
}
.list_box .left {
  width: 18%;
  height: 95%;
  float: left;
}
.list_box .right {
  width: 80%;
  height: 100%;
  float: left;
}
.right .top_box {
  width: 95%;
  height: 90%;
  background-color: white;
  margin: 0 auto;
}
.toplist_img {
  width: 100%;
  height: 95%;
  border-radius: 10px;
}
.top_box li {
  width: 100%;
  height: 20%;
  background-color: #f4f4f4;
  border-radius: 5px;
  display: flex;
  align-items: center;
  position: relative;
}
.top_box .li1 {
  background-color: white;
}
.top_box li p{
  margin-left: 10px;
}
.top_box .p1 {
  color: #ec4189;
}
.top_box .ar{
  position: absolute;
  right: 15px;
  color: #959595;
  font-size: 0.8rem;
}

.top_box li:hover {
  background-color: #efefef;
}
.look{
  width: 95%;
  height: 10%;
  margin: 0 auto;
  padding: 5px 0;
  color: #373737;
  display: flex;
  align-items: center;
}
.look a{
  color: #676767;
  font-size: 0.9rem;
}
.look a:hover{
  color: #373737;
}
.look i{
  font-size: 0.8rem;
  margin-top: 2px;
  margin-left: 5px;
}
</style>
